<template>
<div class="likeBar">
  <div class="likeItem">猜你喜欢</div>
  <div class="likefa">   
      <div class="like" v-for="(item,index) in arr" :key="index">       
          <img :src="item.imgs"/>      
        <div>
          <span class="spanOne span">{{item.price}}</span>
          <span class="spanTwo span">{{item.priceTwo}}</span>
        </div>      
    </div>  
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          imgs: require("../../assets/img/like/1.webp"),
          price:'￥99',
          priceTwo:'￥199'
          },
        {
          imgs: require("../../assets/img/like/2.webp"),
          price:'￥199',
          priceTwo:'￥299'
          },
        {
          imgs: require("../../assets/img/like/3.webp"),
          price:'￥59',
          priceTwo:'￥99'
          },
        {
          imgs: require("../../assets/img/like/4.webp"),
          price:'￥79',
          priceTwo:'￥119'
          },
        {imgs: require("../../assets/img/like/5.webp"),
        price:'￥99',
          priceTwo:'￥199'
        },
        {
          imgs: require("../../assets/img/like/6.webp"),
          price:'￥299',
          priceTwo:'￥399'
        },
        {
          imgs: require("../../assets/img/like/7.webp"),
          price:'￥39',
          priceTwo:'￥99'
        },
        {
          imgs: require("../../assets/img/like/8.webp"),
          price:'￥449',
          priceTwo:'￥799'
        },
        
      ],
    };
  },
};
</script>

<style>
  .span{
    font-size: 14px;
  }
  .spanOne{
    color: #f00;
    margin-right: 4px;
  }
  .spanTwo{
    text-decoration-line:line-through;
  }
  .likeItem{
    color: rgb(78, 22, 151);
    font-weight: 600;
  }
.likeBar{
  padding-top: 10px;
  text-align: center;
}
.likefa{
   display: flex;
   flex-wrap: wrap;
}
  .like{
   flex:1;
   padding: 4px;
  } 
  .like img{
    width: 100%;
    vertical-align: middle;
  }
</style>